<template>
  <div
    class="wrap-item"
    :style="{
      '--scroll-width': '0px',
    }"
  >
    <div class="wrap-other-roll">
      <div class="card">
        <div class="title">
          服务推荐
          <el-button style="float: right; padding: 0" type="text" @click="add"
            >添加服务</el-button
          >
        </div>
        <div class="service" v-for="(item, index) in topPosition" :key="index">
          <div class="service-remove">
            <el-button
              type="danger"
              size="mini"
              v-if="index != 0"
              @click="remove(item)"
              >删除</el-button
            >
          </div>
          <el-card shadow="always">
            <div class="service-img">
              <web-upload
                @upload="(e) => upload(e, item)"
                :size="[320, 190]"
                accept="image/*"
              />
              <img :src="item.img" />
            </div>
            <div class="service-link">
              <el-input
                type="text"
                placeholder="请输入服务链接"
                v-model="item.url"
                clearable
                maxlength="50"
              >
              </el-input>
            </div>
          </el-card>
        </div>
      </div>
      <!-- 农技检测服务 -->
      <div class="card">
        <div class="title">农技检测服务</div>
        <el-form
          :inline="true"
          :model="agriculturalTechnology"
          label-width="120px"
          class="demo-form-inline more"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="封面图片" required>
                <web-upload
                  @upload="(e) => cover(e, 'agriculturalTechnology')"
                  :size="[540, 470]"
                  accept="image/*"
                />
                <img
                  :src="agriculturalTechnology.extParams"
                  class="cover-img"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="更多跳转地址" required>
                <el-input
                  v-model="agriculturalTechnology.more"
                  maxlength="100"
                  clearable
                  style="width: 380px"
                  placeholder="请输入更多跳转地址"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详情跳转地址" required>
                <el-input
                  v-model="agriculturalTechnology.detail"
                  maxlength="100"
                  clearable
                  style="width: 380px"
                  placeholder="请输入详情跳转地址"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="获取数据个数" required>
                <el-input-number
                  v-model="agriculturalTechnology.count"
                  controls-position="right"
                  :min="1"
                  :max="8"
                  style="width: 380px"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数据推荐标签" required>
                <el-select
                  v-model="agriculturalTechnology.tag"
                  style="width: 380px"
                  placeholder="请选择数据推荐标签"
                >
                  <el-option label="时间" value="时间"></el-option>
                  <el-option label="价格" value="价格"></el-option>
                  <el-option label="销量" value="销量"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序方式" required>
                <el-radio-group v-model="agriculturalTechnology.sort">
                  <el-radio :label="0">正序</el-radio>
                  <el-radio :label="1">倒序</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 农技托管服务 -->
      <div class="card">
        <div class="title">农技托管服务</div>
        <el-form
          :inline="true"
          :model="trustShipTechnology"
          label-width="120px"
          class="demo-form-inline more"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="封面图片" required>
                <web-upload
                  @upload="(e) => cover(e, 'trustShipTechnology')"
                  :size="[540, 470]"
                  accept="image/*"
                />
                <img :src="trustShipTechnology.extParams" class="cover-img" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="更多跳转地址" required>
                <el-input
                  v-model="trustShipTechnology.more"
                  maxlength="100"
                  clearable
                  style="width: 380px"
                  placeholder="请输入更多跳转地址"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详情跳转地址" required>
                <el-input
                  v-model="trustShipTechnology.detail"
                  maxlength="100"
                  clearable
                  style="width: 380px"
                  placeholder="请输入详情跳转地址"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="获取数据个数" required>
                <el-input-number
                  v-model="trustShipTechnology.count"
                  controls-position="right"
                  :min="1"
                  :max="8"
                  style="width: 380px"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数据推荐标签" required>
                <el-select
                  v-model="trustShipTechnology.tag"
                  style="width: 380px"
                  placeholder="请选择数据推荐标签"
                >
                  <el-option label="时间" value="时间"></el-option>
                  <el-option label="价格" value="价格"></el-option>
                  <el-option label="销量" value="销量"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序方式" required>
                <el-radio-group v-model="trustShipTechnology.sort">
                  <el-radio :label="0">正序</el-radio>
                  <el-radio :label="1">倒序</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 农资销售 -->
      <div class="card">
        <div class="title">农资销售</div>
        <el-form :inline="true" :model="b2c" class="demo-form-inline more">
          <el-row>
            <el-col :span="24">
              <el-form-item label="封面图片" required>
                <web-upload
                  @upload="(e) => cover(e, 'b2c')"
                  :size="[260, 960]"
                  accept="image/*"
                />
                <img :src="b2c.extParams" class="cover-img" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="更多跳转地址" required>
                <el-input
                  v-model="b2c.more"
                  maxlength="100"
                  clearable
                  style="width: 380px"
                  placeholder="请输入更多跳转地址"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详情跳转地址" required>
                <el-input
                  v-model="b2c.detail"
                  maxlength="100"
                  clearable
                  style="width: 380px"
                  placeholder="请输入详情跳转地址"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="获取数据个数" required>
                <el-input-number
                  v-model="b2c.count"
                  controls-position="right"
                  :min="1"
                  :max="8"
                  style="width: 380px"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数据推荐标签" required>
                <el-select
                  v-model="b2c.tag"
                  style="width: 380px"
                  placeholder="请选择数据推荐标签"
                >
                  <el-option label="时间" value="时间"></el-option>
                  <el-option label="销量" value="销量"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序方式" required>
                <el-radio-group v-model="b2c.sort">
                  <el-radio :label="0">正序</el-radio>
                  <el-radio :label="1">倒序</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 采购优选 -->
      <div class="card">
        <div class="title">采购优选</div>
        <el-form :inline="true" :model="b2b" class="demo-form-inline more">
          <el-row>
            <el-col :span="24">
              <el-form-item label="封面图片" required>
                <web-upload
                  @upload="(e) => cover(e, 'b2b')"
                  :size="[260, 960]"
                  accept="image/*"
                />
                <img :src="b2b.extParams" class="cover-img" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="更多跳转地址" required>
                <el-input
                  v-model="b2b.more"
                  maxlength="100"
                  clearable
                  style="width: 380px"
                  placeholder="请输入更多跳转地址"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详情跳转地址" required>
                <el-input
                  v-model="b2b.detail"
                  maxlength="100"
                  clearable
                  style="width: 380px"
                  placeholder="请输入详情跳转地址"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="获取数据个数" required>
                <el-input-number
                  v-model="b2b.count"
                  controls-position="right"
                  :min="1"
                  :max="8"
                  style="width: 380px"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数据推荐标签" required>
                <el-select
                  v-model="b2b.tag"
                  style="width: 380px"
                  placeholder="请选择数据推荐标签"
                >
                  <el-option label="时间" value="时间"></el-option>
                  <el-option label="价格" value="价格"></el-option>
                  <el-option label="销量" value="销量"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序方式" required>
                <el-radio-group v-model="b2b.sort">
                  <el-radio :label="0">正序</el-radio>
                  <el-radio :label="1">倒序</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="text-align: center; padding-bottom: 20px">
        <span
          class="wrap-btn wrap-success"
          v-if="$checkPermission(101)"
          @click="save"
          >保存</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: { topPosition: { items: [] } },
      agriculturalTechnology: {}, //农技检测服务
      trustShipTechnology: {}, //农技托管服务
      b2b: {},
      b2c: {},
      topPosition: [
        {
          img: '',
          name: '',
          url: '',
        },
      ],
    }
  },
  created() {
    this.itemList()
  },
  methods: {
    itemList() {
      // 获取详情
      this.$axios.get('/admin/portal/suggest/get').then((data) => {
        this.form = { topPosition: { items: [] } }
        this.agriculturalTechnology = {}
        this.trustShipTechnology = {}
        this.b2b = {}
        this.b2c = {}
        this.topPosition = [{ img: '', name: '', url: '' }]
        if (data.code == 200) {
          if (data.data) {
            this.form = data.data
            this.agriculturalTechnology = data.data.agriculturalTechnology || {
              extParams: '',
            }
            this.trustShipTechnology = data.data.trustShipTechnology || {
              extParams: '',
            }
            this.b2b = data.data.b2b || { extParams: '' }
            this.b2c = data.data.b2c || { extParams: '' }
            this.topPosition = data.data.topPosition.items || []
          }
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    add() {
      //添加服务
      this.topPosition.push({
        img: '',
        name: '',
        url: '',
      })
    },
    remove(item) {
      const index = this.topPosition.indexOf(item)
      //删除服务
      if (index !== -1) {
        this.topPosition.splice(index, 1)
      }
    },
    upload(data, item) {
      //上传服务图片
      item.img = data.fileDomain + data.url
    },
    cover(data, item) {
      //上传封面图片
      this[item].extParams = data.fileDomain + data.url
    },
    save() {
      //保存
      const arr = []
      this.topPosition.forEach((element) => {
        if (element.img == '') {
          arr.push('请上传服务图片')
        }
        if (element.url == '') {
          arr.push('请输入服务链接')
        }
      })
      if (arr.length > 0) {
        this.$message.error(arr[0])
        return
      }
      if (!this.agriculturalTechnology.extParams) {
        this.$message.error('请输入农技检测服务封面')
        return
      }
      if (!this.agriculturalTechnology.more) {
        this.$message.error('请输入农技检测服务更多跳转地址')
        return
      }
      if (!this.agriculturalTechnology.detail) {
        this.$message.error('请输入农技检测服务详情跳转地址')
        return
      }
      if (!this.agriculturalTechnology.count) {
        this.$message.error('请输入农技检测服务获取数据个数')
        return
      }
      if (!this.agriculturalTechnology.tag) {
        this.$message.error('请选择农技检测服务数据推荐标签')
        return
      }
      if (
        !this.agriculturalTechnology.sort &&
        this.agriculturalTechnology.sort != 0
      ) {
        this.$message.error('请选择农技检测服务排序方式')
        return
      }
      if (!this.trustShipTechnology.extParams) {
        this.$message.error('请输入农技托管服务务封面')
        return
      }
      if (!this.trustShipTechnology.more) {
        this.$message.error('请输入农技托管服务更多跳转地址')
        return
      }
      if (!this.trustShipTechnology.detail) {
        this.$message.error('请输入农技托管服务详情跳转地址')
        return
      }
      if (!this.trustShipTechnology.count) {
        this.$message.error('请输入农技托管服务获取数据个数')
        return
      }
      if (!this.trustShipTechnology.tag) {
        this.$message.error('请选择农技托管服务数据推荐标签')
        return
      }
      if (
        !this.trustShipTechnology.sort &&
        this.trustShipTechnology.sort != 0
      ) {
        this.$message.error('请选择农技托管服务排序方式')
        return
      }
      if (!this.b2c.extParams) {
        this.$message.error('请输入农资销售封面图片')
        return
      }
      if (!this.b2c.more) {
        this.$message.error('请输入农资销售更多跳转地址')
        return
      }
      if (!this.b2c.detail) {
        this.$message.error('请输入农资销售详情跳转地址')
        return
      }
      if (!this.b2c.count) {
        this.$message.error('请输入农资销售获取数据个数')
        return
      }
      if (!this.b2c.tag) {
        this.$message.error('请选择农资销售数据推荐标签')
        return
      }
      if (!this.b2c.sort && this.b2c.sort != 0) {
        this.$message.error('请选择农资销售排序方式')
        return
      }
      if (!this.b2b.extParams) {
        this.$message.error('请输入采购优选封面图片')
        return
      }
      if (!this.b2b.more) {
        this.$message.error('请输入采购优选更多跳转地址')
        return
      }
      if (!this.b2b.detail) {
        this.$message.error('请输入采购优选详情跳转地址')
        return
      }
      if (!this.b2b.count) {
        this.$message.error('请输入采购优选获取数据个数')
        return
      }
      if (!this.b2b.tag) {
        this.$message.error('请选择采购优选数据推荐标签')
        return
      }
      if (!this.b2b.sort && this.b2b.sort != 0) {
        this.$message.error('请选择采购优选排序方式')
        return
      }
      this.form.topPosition.items = this.topPosition
      this.form.agriculturalTechnology = this.agriculturalTechnology
      this.form.trustShipTechnology = this.trustShipTechnology
      this.form.b2c = this.b2c
      this.form.b2b = this.b2b
      this.$axios.post('/admin/portal/suggest/edit', this.form).then((data) => {
        if (data.code == 200) {
          this.$message.success('操作成功！')
          this.itemList()
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.card {
  padding-bottom: 20px;
  .title {
    color: #45ab49;
    border-bottom: 1px solid #45ab49;
    padding: 10px 0;
  }
  .el-card {
    margin-top: 20px;
  }
  .service {
    width: 490px;
    display: inline-block;
    margin-right: 20px;
    position: relative;
    &-remove {
      position: absolute;
      top: 40px;
      right: 20px;
      z-index: 1999;
    }
    &-img {
      position: relative;
      img {
        display: block;
        position: absolute;
        top: 0;
        left: 100px;
        max-height: 82px;
        max-width: 345px;
      }
    }
    &-link {
      .el-input {
        width: 100%;
        margin: 10px 10px 0 0;
      }
    }
  }
  .cover-img {
    display: block;
    position: absolute;
    top: 0;
    left: 100px;
    max-height: 82px;
  }
  .more {
    margin-top: 20px;
  }
}
</style>
